import { Button } from "@nextui-org/react";
import Image from "next/image";
function CardItems({item,index}){
    return (<>
        <div className="scrollItem inline-block" key={index}>
            <div className="operate_card flex flex-col justify-center items-center w-[186px] h-[217px] card_background rounded-[15px]">
                <header className="card_header">
                    <Image src={item.imageUrl} alt="avatar" width={85} height={85}  className="card_avatar border-[2px] border-solid border-[#F5F5F5] bg-[lightgray] max-w-[85px] max-h-[85px] rounded-full"></Image>
                </header>
                <div className="card_body">
                    <div className="card_title my-[15px] text-[14px] font-bold text-center">{item.name}</div>
                    <div className="card_description  text-[14px] leading-5  text-center">{item.description}</div>
                </div>
            </div>
        </div>
    </>)
}
export default function Operate(props){
    // 向右无限滚动
    const items = [
        // 你的滚动内容数组
       {
        imageUrl: '/avatar.png',
        name: '用户名',
        description: '擅长小红书爆文写作与分析',
       },
       {
        imageUrl: '/avatar.png',
        name: '用户名',
        description: '擅长小红书爆文写作与分析',
       },
       {
        imageUrl: '/avatar.png',
        name: '用户名',
        description: '擅长小红书爆文写作与分析',
       },
       {
        imageUrl: '/avatar.png',
        name: '用户名',
        description: '擅长小红书爆文写作与分析',
       },
       {
        imageUrl: '/avatar.png',
        name: '用户名',
        description: '擅长小红书爆文写作与分析',
       },
       {
        imageUrl: '/avatar.png',
        name: '用户名',
        description: '擅长小红书爆文写作与分析',
       },
       {
        imageUrl: '/avatar.png',
        name: '用户名',
        description: '擅长小红书爆文写作与分析',
       },
       {
        imageUrl: '/avatar.png',
        name: '用户名',
        description: '擅长小红书爆文写作与分析',
       },
       {
        imageUrl: '/avatar.png',
        name: '用户名',
        description: '擅长小红书爆文写作与分析',
       },
       {
        imageUrl: '/avatar.png',
        name: '用户名',
        description: '擅长小红书爆文写作与分析',
       }
        // ...更多项目
      ];
      const secondItems = [
        // 你的滚动内容数组
       {
        imageUrl: '/testPublicize.png',
        name: '用户名',
        description: '擅长小红书爆文写作与分析',
       },
       {
        imageUrl: '/testPublicize.png',
        name: '用户名',
        description: '擅长小红书爆文写作与分析',
       },
       {
        imageUrl: '/testPublicize.png',
        name: '用户名',
        description: '擅长小红书爆文写作与分析',
       },
       {
        imageUrl: '/testPublicize.png',
        name: '用户名',
        description: '擅长小红书爆文写作与分析',
       },
       {
        imageUrl: '/testPublicize.png',
        name: '用户名',
        description: '擅长小红书爆文写作与分析',
       },
       {
        imageUrl: '/testPublicize.png',
        name: '用户名',
        description: '擅长小红书爆文写作与分析',
       },
       {
        imageUrl: '/testPublicize.png',
        name: '用户名',
        description: '擅长小红书爆文写作与分析',
       },
       {
        imageUrl: '/testPublicize.png',
        name: '用户名',
        description: '擅长小红书爆文写作与分析',
       },
       {
        imageUrl: '/testPublicize.png',
        name: '用户名',
        description: '擅长小红书爆文写作与分析',
       },
       {
        imageUrl: '/testPublicize.png',
        name: '用户名',
        description: '擅长小红书爆文写作与分析',
       }
        // ...更多项目
      ];
    return (
    <div className="operate">
        <div className="operate_container w-screen overflow-hidden whitespace-nowrap relative mt-[69px]">
            <div className="scrollWrapper inline-block">
                {
                    items.map((item, index) => (
                        // CardItems(item,index)
                        <CardItems item={item} index={index} key={index} />
                    ))
                }
            </div>
            <div className="scrollWrapper inline-block">
                {
                    items.map((item, index) => (
                        // CardItems(item,index)
                        <CardItems item={item} index={index} key={index} />
                    ))
                }
            </div>
        </div>
        <div className="operate_container w-screen overflow-hidden whitespace-nowrap relative mt-[25px] pl-[109px]">
            <div className="scrollWrapper inline-block">
                {
                    secondItems.map((item, index) => (
                        // CardItems(item,index)
                        <CardItems item={item} index={index} key={index} />
                    ))
                }
            </div>
            <div className="scrollWrapper inline-block">
                {
                    secondItems.map((item, index) => (
                        // CardItems(item,index)
                        <CardItems item={item} index={index} key={index} />
                    ))
                }
            </div>
        </div>
        <div className="button_group flex justify-center mt-[43px]">
            <Button color="primary" radius="full" size="lg" className="px-[56px] py-[16px] text-[28px] leading-none h-auto">去试试</Button>
        </div>
    </div>)
}
